<template>
  <el-dialog title="充电桩列表" :close-on-click-modal="false" :visible.sync="visible" width="80%">
    <avue-crud ref="crud"
               :data="dataList"
               :table-loading="dataListLoading"
               :option="tableOption"
               @current-change="handleCurrentChange"
               @size-change="handleSizeChange">
      <template slot-scope="scope" slot="info">
        <div class="cell">
          <div>充电桩编号：<span>{{scope.row.code}}</span></div>
          <div>外壳条码ID：<span>{{scope.row.shellId}}</span></div>
          <div>SIM卡ID：<span>{{scope.row.iccid}}</span></div>
          <div>类型：<span>{{scope.row.chargingTypeName}}</span></div>
          <div>信号强度：<span>{{scope.row.qos}}</span></div>
          <div>创建时间：<span>{{scope.row.createDate}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="pileCondition">
        <div class="cell">
          <div>最后使用日期：<span>{{scope.row.lastUseTime}}</span></div>
          <div>未使用天数：<span>{{scope.row.daysNoUse}}</span></div>
          <div>上线时间：<span>{{scope.row.onlineDate}}</span></div>
          <div>下线时间：<span>{{scope.row.offlineDate}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="auditInfo">
        <div class="cell">
          <div>合伙人姓名：<span>{{scope.row.partnerName}}</span></div>
          <div>合伙人手机号码：<span>{{scope.row.partnerMobile}}</span></div>
          <div>片区编号：<span>{{scope.row.chargingGroupId}}</span></div>
          <div>片区名称：<span>{{scope.row.chargingGroupName}}</span></div>
          <div>所属运营商：<span>{{scope.row.merchantName}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="manageInfo">
        <div class="cell">
          <div>今日分佣金额：<span>{{scope.row.todayDivideAmount}}</span></div>
          <div>今日分佣订单数量：<span>{{scope.row.todayDivideCount}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="socketInfo">
        <div class="cell">
          <div>空闲中：<span>{{scope.row.expireSocketCount}}</span></div>
          <div>充电中：<span>{{scope.row.chargingSocketCount}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="receiverInfo">
        <div class="cell">
          <div>收货人姓名：<span>{{scope.row.receiver}}</span></div>
          <div>收货人手机号：<span>{{scope.row.receiverMobile}}</span></div>
          <div>申请原因：<span>{{scope.row.reason}}</span></div>
          <div>收货地址：<span>{{scope.row.address}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="chargeMode">
        <div class="cell">
          <div>计费方式：<span>{{scope.row.billingMethod}}</span></div>
          <div>计费规则：<span>{{scope.row.chargingRule}}</span></div>
          <div>收费方式：<span>{{scope.row.chargingMethod}}</span></div>
        </div>
      </template>
      <template slot-scope="scope" slot="refundInfo">
        <div class="cell">
          <div>是否退过款：<span>{{scope.row.isRefund == 0?'否':'是'}}</span></div>
          <div>订单实际支付金额：<span>{{scope.row.actualAmount}}</span></div>
          <div>退款金额：<span>{{scope.row.refundAmount}}</span></div>
          <div>退款原因：<span>{{scope.row.refundReason}}</span></div>
        </div>
      </template>
    </avue-crud>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </el-dialog>
</template>

<script>
  import { tableOption } from '@/crud/pile/mechantPileList'
  export default {
    name: 'pileDetailInfo',
    data(){
      return {
        visible:false,
        dataList: [],
        dataListLoading: false,
        tableOption: tableOption,
        dataForm:{},
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        }
      }
    },
    methods:{

      init(data){
        this.dataForm=data
        this.visible=true
        this.getDataList()
      },

      // 获取数据列表
      getDataList (page) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/v1/charging/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              this.dataForm
            )
          )
        }).then(({ data }) => {
          console.log(data)
          this.dataList = data.data.chargingListIPage.records
          this.page.total = data.data.chargingListIPage.total
          this.dataListLoading = false
        })
      },
      handleCurrentChange (val) {
        this.page.currentPage = val
        this.getDataList(this.page)
      },
      handleSizeChange(val){
        this.page.pageSize = val
        this.getDataList(this.page)
      }
    }
  }
</script>

<style scoped>

</style>
